<template>
	<div class="centermap-container">
		<div class="chart" id="chart_right4"></div>
	</div>
</template>

<script>
	import '@/assets/js/echarts-wordcloud.min'
	export default {
		name: "centermap",
		data() {
			return {
				timer: null
			}
		},
		mounted() {
			this.getEchartRight1();

		},
		methods: {
			getEchartRight1() {
				let myChart = echarts.init(document.getElementById('chart_right4'));

				var uploadedDataURL = "json/110100.json";

				myChart.showLoading();
				$.getJSON(uploadedDataURL, function(geoJson) {
					echarts.registerMap('jiangxi', geoJson);
					myChart.hideLoading();
					var geoCoordMap = {
						'南城村': [113.597914982009, 22.92595941],
						'昌平村': [113.69226909691, 23.02318036],
						'大岭丫村': [113.674404380267, 23.02001592],
						'小河村': [113.664464745147, 23.02506852],
						'九曲村': [113.640167552283, 23.011587735],
						'大鱼沙村': [113.642646250644, 23.027845245],
						'北永村': [113.65940401097, 23.00518516],
						'厚德村': [113.65447263236, 23.012492405],
						'蔡白村': [113.679252608552, 22.98455654],
						'大罗沙村': [113.635371537087,22.99272165],
						'永庆村': [113.65616555101,22.999471255],
						'南丫村': [113.636740116082,22.975038135],
						'闸口村': [113.672873168989,23.01201707],
						'南阁办事中心': [113.63423600032,22.997663355]
						// '济宁市': [116.7, 35.42],
						// '莱芜市': [117.70, 36.28],
						
					}
					
					var data = [
						{
							name: '南城村',
							value: 12
							
						},
						{
							name: '闸口村',
							value: 8
							
						},
						{
							name: '南阁办事中心',
							value: 38
							
						},
						{
							name: '昌平村',
							value: 34
						},
						{
							name: '大岭丫村',
							value: 5
						},
						{
							name: '小河村',
							value: 42
						},
						{
							name: '九曲村',
							value: 16
						},
						{
							name: '大鱼沙村',
							value: 25
						},
						{
							name: '北永村',
							value: 13
						},
						{
							name: '厚德村',
							value: 21
						},
						{
							name: '蔡白村',
							value: 18
						},
						{
							name: '大罗沙村',
							value:31
						},
						{
							name: '永庆村',
							value: 27
						},
						{
							name: '南丫村',
							value: 68
						}
					];
					var max = 480,
						min = 30 // todo 
					var maxSize4Pin = 100,
						minSize4Pin = 20;

					var convertData = function(data) {
						var res = [];
						for (var i = 0; i < data.length; i++) {
							var geoCoord = geoCoordMap[data[i].name];
							if (geoCoord) {
								res.push({
									name: data[i].name,
									value: geoCoord.concat(data[i].value)
								});
							}
						}
						return res;
					};


					const option = {
						title: {
							top: 20,
							subtext: '',
							x: 'center',
							textStyle: {
								color: '#ccc'
							}
						},

						tooltip: {
							trigger: 'item',
							formatter: function(params) {
									if (typeof(params.value)[2] == "undefined") {
										return params.name + ' : ' + params.value;
									} else {
										return params.name + ' : ' + params.value[2];
									}
								
							}
						},
						legend: {
							orient: 'vertical',
							y: 'bottom',
							x: 'right',
							data: ['pm2.5'],
							textStyle: {
								color: '#fff'
							}
						},
						visualMap: {
							show: false,
							min: 0,
							max: 500,
							left: 'left',
							top: 'bottom',
							text: ['高', '低'], // 文本，默认为数值文本
							calculable: true,
							seriesIndex: [1],
							inRange: {
							}
						},
						geo: {
							show: true,
							map: 'jiangxi',
							label: {
								normal: {
									show: false
								},
								emphasis: {
									show: false,
								}
							},
							roam: true,
							itemStyle: {
								normal: {
									areaColor: 'transparent',
									borderColor: '#3fdaff',
									borderWidth: 2,
									shadowColor: 'rgba(63, 218, 255, 0.5)',
									shadowBlur: 30
								},
								emphasis: {
									areaColor: '#2B91B7',
								}
							}
						},
						series: [{
								name: 'light',
								type: 'scatter',
								coordinateSystem: 'geo',
								data: convertData(data),
								symbolSize: function(val) {
									return val[2] / 10;
								},
								label: {
									normal: {
										formatter: '{b}',
										position: 'right',
										show: false
									},
								
								},
								itemStyle: {
									normal: {
										color: '#F4E925'
									}
								}
							},
							{
								type: 'map',
								map: 'jiangxi',
								geoIndex: 0,
								aspectScale: 0.75, //长宽比
								showLegendSymbol: false, // 存在legend时显示
								
								data: data
							},
							{
								name: 'Top 5',
								type: 'effectScatter',
								coordinateSystem: 'geo',
								data: convertData(data.sort(function(a, b) {
									return b.value - a.value;
								}).slice(0, 5)),
								symbolSize: function(val) {
									return val[2] / 10;
								},
								showEffectOn: 'render',
								rippleEffect: {
									brushType: 'stroke'
								},
								label: {
									normal: {
										formatter: '{b}',
										position: 'right',
										show: true
									}
								},
								itemStyle: {
									normal: {
										color: '#F4E925',
										shadowBlur: 10,
										shadowColor: '#05C3F9'
									}
								},
								zlevel: 1
							},

						]
					};
					myChart.setOption(option);
				});
				window.addEventListener('resize', () => {
					myChart.resize();
				});
			},
		},
		beforeDestroy() {
			clearInterval(this.timer);
		}
	};
</script>

<style lang="scss" scoped>
	.centermap-container {
		.chart {
			height: 10.4rem;
		}
	}
</style>
